<template>
  <div class="progress-bar-container">
    <div class="progress-bar" :style="{ width: progress + '%' }"></div>
  </div>
  <div class="space-info">
    已用空间：{{ usedSpace }}GB / 总空间：{{ totalSpace }}GB
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  totalSpace: {
    type: Number,
    required: true
  },
  usedSpace: {
    type: Number,
    required: true
  }
});

const progress = computed(() => {
  console.log(props);
  return (props.usedSpace / props.totalSpace) * 100;
});
</script>

<style>
.progress-bar-container {
  width: 100%;
  background-color: #eee;
  border-radius: 8px;
  overflow: hidden;
}
.progress-bar {
  height: 20px;
  background-color: #4caf50;
  border-radius: 8px 0 0 8px;
}
.space-info {
  margin-top: 10px;
  font-size: 14px;
}
</style>
